import { defineStore } from "pinia";
import { ref, computed } from "vue";

// 如果希望使用组合式的语法，第二个参数要写成函数

// 仓库里面要定义数据的时候，使用ref
export const useCityStore = defineStore("city", () => {
  const cityname = ref<string>("beijing");
  const num = ref<number>(5);

  // getters的东西，可以直接使用computed方法
  const doubleNum = computed<number>(() => {
    return num.value * 2;
  });

  // actions的东西，直接定义函数就行
  // 里面可以直接写异步
  const changenum = (payload: any) => {
    setTimeout(() => {
      num.value *= payload.n;
    }, 1000);
  };

  return { cityname, num, doubleNum, changenum };
});

/*
  pinia vs vuex

  1. 增加了组合式api的语法
  2. 少了一个mutations的概念，直接通过actions来修改数据
  3. 自带了模块化
  4. 更好的ts的支持
  5. 修改数据可以不借助与函数，可以直接在组件修改
*/
